<template>
    <div id="tabDetails">
         <ul class="tabs" v-if="pageList.length > 1">
             <li :class="{active:index == activeIndex}" @click="changeIndex(index,item)" v-for="(item,index) in pageList" :key="index">{{item.title}}</li>
         </ul>
         <div :class="['main',{'main-border':pageList.length < 2}]" v-for="(item,index) in activeList" :key="index">
             <div class="title" :style="{'margin-top':pageList.length < 2?'15px':''}" v-if="item.title">{{item.title}}</div>
             <div v-if="item.video==''" class="video" :style="{'margin-top':item.title?'':pageList.length < 2?'15px':'26px'}">
                 <span v-if="item.video == ''">视频录制中...</span>
                <video v-else :src="item.video" controls="controls" width="100%">
                    您的浏览器不支持 video 标签。
                </video>
             </div>
             <div class="minTitle" v-if="pageList.length < 2">注意事项：</div>
             <div class="content" v-html="item.content" :style="{'margin-top':pageList.length < 2?'5px':'14px'}"></div>
         </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: 0,
      pageList: [],
      activeList: []
    };
  },
  created () {
    this.pageList = [...this.$route.params.details];
    this.activeList = this.$route.params.details[0].list;
    document.title = this.$route.params.title;
  },
  methods: {
    changeIndex (index, item) {
      this.activeIndex = index;
      this.activeList = item.list || [];
    }
  }
};
</script>

<style lang="scss" scoped>
#tabDetails{
    font-family: PingFangSC-regular;
    font-size: 14px;
    width: 100%;
    height: 100%;
    background: #fff !important;
    overflow-y: auto;
    padding-bottom: 30px;
    ul{
        list-style-type: none
    }
    i,span,em{
        font-style: normal;
    }
    img{
        display: block;
    }
    .tabs{
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0px 1px 2px 0px rgba(234, 234, 234, 0.99);
        li{
            height: 45px;
            line-height: 45px;
            color: rgba(23, 23, 23, 1);
            font-size: 15px;
            border-bottom:2PX solid rgba(255,255,255,0);
        }
        .active{
            color: #0C8DFE;
            border-bottom:2PX solid #0C8DFE;
        }
    }
    .main{
        margin: 0 15px;
        width: calc(100% - 30px);
        overflow: hidden;
        &:last-child{
            border-bottom: none
        }
        .title{
            height: 20px;
            line-height:20px;
            color: rgba(70, 70, 70, 1);
            font-size: 14px;
            margin: 26px 0 10px;
            font-weight: 600
        }
        .minTitle{
            height: 20px;
            line-height:20px;
            color:rgba(16, 16, 16, .7);
            font-size: 12px;
            margin: 16px 0 0;
            font-weight: 600
        }
        .video{
            width: 100%;
            height: 217px;
            background-color: #f2f2f2;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
               font-size: 14px;
               color: #979797;
            }
        }
        .content{
           margin-top:14px;
           color: rgba(106, 106, 106, 1);
           font-size: 12px;
           line-height:20px;
           letter-spacing: 1.2px;
        }
    }
    .main-border{
        padding-bottom: 20px;
        border-bottom: 1PX solid  rgba(232, 232, 232, .5);
    }
}
</style>
